<div
    bsModal
    #createOrEditModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="createOrEditModal"
    aria-hidden="true"
    [config]="{ backdrop: 'static' }"
    (onHidden)="onHidden($event)"
    (onShown)="shown()"
>
    <div class="modal-dialog modal-max">
        <div class="modal-content">
            <form #editForm="ngForm" novalidate autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        台帐信息
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="m-subheader">
                    <div class="row">
                        <div class="row col-11 align-items-center">
                            <!-- <div class="input-width">
                                <div class="form-group m-form__group m-form__group--sm row">
                                    <label class="col-4 col-form-label" for="certificationNumFilter">合格证号:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control m-input" name="certificationNumFilter" id="certificationNumFilter"
                                            [(ngModel)]="certificationNumFilter" />
                                    </div>
                                </div>
                            </div>
                            <div class="input-width">
                                <div class="form-group m-form__group m-form__group--sm row">
                                    <label class="col-4 col-form-label" for="reCheckFilter">复验编号:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control m-input" name="reCheckFilter" id="reCheckFilter" [(ngModel)]="reCheckFilter" />
                                    </div>
                                </div>
                            </div> -->
                            <div class="input-width">
                                <div class="form-group m-form__group m-form__group--sm row">
                                    <label class="col-4 col-form-label" for="Search_DrawingNum">工装图号:</label>
                                    <div class="col-8">
                                        <input
                                            type="text"
                                            class="form-control m-input"
                                            name="Search_DrawingNum"
                                            id="Search_DrawingNum"
                                            [(ngModel)]="f_CAL_ToolingPictureId"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="input-width">
                                <div class="form-group m-form__group m-form__group--sm row">
                                    <label class="col-4 col-form-label" for="f_Specification">规格:</label>
                                    <div class="col-8">
                                        <input
                                            type="text"
                                            class="form-control m-input"
                                            name="f_Specification"
                                            id="f_Specification"
                                            [(ngModel)]="f_Specification"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="input-width">
                                <div class="form-group m-form__group m-form__group--sm row">
                                    <label class="col-4 col-form-label " for="f_MaterialCode">工装编号:</label>
                                    <div class="col-8">
                                        <input
                                            type="text"
                                            class="form-control m-input"
                                            name="f_MaterialCode"
                                            id="f_MaterialCode"
                                            [(ngModel)]="f_MaterialCode"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="input-width">
                                <div class="form-group m-form__group m-form__group--sm row">
                                    <label class="col-4 col-form-label" for="Search_TaskNum">工装名称:</label>
                                    <div class="col-8">
                                        <input
                                            type="text"
                                            class="form-control m-input"
                                            name="Search_TaskNum"
                                            id="Search_TaskNum"
                                            [(ngModel)]="f_MaterialName"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-1 m--align-center">
                            <button (click)="getBaseAccount()" class="btn btn-primary" type="submit">
                                <i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i>查询
                            </button>
                        </div>
                    </div>

                    <div class="row" [hidden]="!advancedFiltersAreShown">
                        <!-- <div class="input-width">
                            <div class="form-group m-form__group m-form__group--sm row">
                                <label class="col-4 col-form-label" for="Search_MaterialName">状态:</label>
                                <div class="col-8">
                                    <input type="text" class="form-control m-input" name="Search_MaterialName" id="Search_MaterialName"
                                        [(ngModel)]="f_Station" />
                                </div>
                            </div>
                        </div>
                    
                        <div class="input-width">
                            <div class="form-group m-form__group m-form__group--sm row">
                                <label class="col-4 col-form-label" for="f_TecCondition">技术条件:</label>
                                <div class="col-8">
                                    <input type="text" class="form-control m-input" name="f_TecCondition" id="f_TecCondition" [(ngModel)]="f_TecCondition" />
                                </div>
                            </div>
                        </div> -->

                        <!-- <div class="input-width">
                            <div class="form-group m-form__group m-form__group--sm row">
                                <label class="col-4 col-form-label" for="f_taskNum">任务号:</label>
                                <div class="col-8">
                                    <input type="text" class="form-control m-input" name="f_taskNum" id="f_taskNum" [(ngModel)]="f_taskNum" />
                                </div>
                            </div>
                        </div>
                        <div class="input-width">
                            <div class="form-group m-form__group m-form__group--sm row">
                                <label class="col-4 col-form-label" for="f_drawNum">图号:</label>
                                <div class="col-8">
                                    <input type="text" class="form-control m-input" name="f_drawNum" id="f_drawNum" [(ngModel)]="f_drawNum" />
                                </div>
                            </div>
                        </div>
                        <div class="input-width">
                            <div class="form-group m-form__group m-form__group--sm row">
                                <label class="col-4 col-form-label" for="zydhFilter">质疑单号:</label>
                                <div class="col-8">
                                    <input type="text" class="form-control m-input" name="zydhFilter" id="zydhFilter" [(ngModel)]="zydhFilter" />
                                </div>
                            </div>
                        </div>
                        <div class="input-width">
                            <div class="form-group m-form__group m-form__group--sm row">
                                <label class="col-4 col-form-label" for="zydhFilter">炉批号:</label>
                                <div class="col-8">
                                    <input type="text" class="form-control m-input" name="zydhFilter" id="zydhFilter" [(ngModel)]="stoveNumFilter" />
                                </div>
                            </div>
                        </div> -->
                        <div class="input-width">
                            <div class="form-group m-form__group m-form__group--sm row">
                                <label class="col-4 col-form-label" for="f_Precision">产品型号:</label>
                                <div class="col-8">
                                    <input
                                        type="text"
                                        class="form-control m-input"
                                        name="f_Precision"
                                        id="f_Precision"
                                        [(ngModel)]="f_CAL_ProductModel"
                                    />
                                </div>
                            </div>
                        </div>
                        <div class="input-width">
                            <div class="form-group m-form__group m-form__group--sm row">
                                <label class="col-4 col-form-label" for="Search_MaterialName">数量:</label>
                                <div class="col-8">
                                    <camc-dropdown-auto
                                        [options]="useableOptions"
                                        name="isuseable"
                                        [(ngModel)]="isuseable"
                                        class="float-left dropdownlist"
                                    >
                                    </camc-dropdown-auto>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="input-width">
                            <div class="form-group m-form__group m-form__group--sm row">
                                <label class="col-4 col-form-label" for="userDataPermissions">部门:</label>
                                <div class="col-8">
                                    <camc-dropdown class="float-left dropdownlist" id="userDataPermissions" [options]="userDataPermissions"
                                        name="table" [(ngModel)]="selectedDepts" placeholder="请选择部门" >
                                    </camc-dropdown>
                                </div>
                            </div>
                        </div> -->
                        <div class="input-width">
                            <div class="form-group m-form__group m-form__group--sm row">
                                <label class="col-4 col-form-label" for="warehouseNameFilter">仓库:</label>
                                <div class="col-8">
                                    <camc-multiSelect
                                        class="float-left dropdownlist"
                                        id="warehouseNameFilter"
                                        [options]="roomOption"
                                        name="tabdle"
                                        [(ngModel)]="selectedWareHouse"
                                        styleClass="form-control"
                                        defaultLabel="选择仓库"
                                        maxSelectedLabels="1"
                                        selectedItemsLabel="已选择 {0} 个仓库"
                                    >
                                    </camc-multiSelect>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="input-width">
                            <div class="form-group m-form__group row">
                                <label class="col-4 col-form-label" for="Search_DrawingNum">序列号:</label>
                                <div class="col-8">
                                    <input
                                        type="text"
                                        class="form-control m-input"
                                        name="Search_Precision"
                                        id="Search_Precision"
                                        [(ngModel)]="f_SeriousNum"
                                    />
                                </div>
                            </div>
                        </div> -->
                        <!-- <div class="input-width">
                            <div class="form-group m-form__group m-form__group--sm row">
                                <label class="col-4 col-form-label" for="zydhFilter">存放位置:</label>
                                <div class="col-8">
                                    <input type="text" class="form-control m-input" name="zydhFilter" id="locationFilter" [(ngModel)]="locationFilter" />
                                </div>
                            </div>
                        </div> -->
                    </div>
                    <div class="row margin-bottom-5">
                        <div class="col-sm-12">
                            <span
                                class="clickable-item text-muted"
                                *ngIf="!advancedFiltersAreShown"
                                (click)="advancedFiltersAreShown = !advancedFiltersAreShown"
                                ><i class="fa fa-angle-down"></i> {{ 'ShowAdvancedFilters' | localize }}</span
                            >
                            <span
                                class="clickable-item text-muted"
                                *ngIf="advancedFiltersAreShown"
                                (click)="advancedFiltersAreShown = !advancedFiltersAreShown"
                                ><i class="fa fa-angle-up"></i> {{ 'HideAdvancedFilters' | localize }}</span
                            >
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="m-portlet__body" style="border-top: 1px solid #ebedf2;  margin-top: 11px;">
                        <h4>台帐信息</h4>
                        <div class="tabbable-line">
                            <div class="tab-content" style="padding-top:0;">
                                <div class="tab-pane active" id="tab-model">
                                    <div class="row align-items-center">
                                        <div
                                            class="primeng-datatable-container"
                                            [busyIf]="primengTableHelper.isLoading"
                                        >
                                            <p-table
                                                #dataTable
                                                (onLazyLoad)="getRecordsIfNeeds($event)"
                                                [value]="primengTableHelper.records"
                                                [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                                [paginator]="false"
                                                [lazy]="true"
                                                [scrollable]="true"
                                                ScrollWidth="100%"
                                                [responsive]="primengTableHelper.isResponsive"
                                                [resizableColumns]="primengTableHelper.resizableColumns"
                                                [(selection)]="selectedValue"
                                                selectionMode="multiple"
                                            >
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th style="width: 25px">
                                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                                        </th>
                                                        <th style="width: 40px">
                                                            序号
                                                        </th>
                                                        <ng-container *ngFor="let ext of extensions">
                                                            <th width="{{ ext.width }}">
                                                                {{ ext.title }}
                                                            </th>
                                                        </ng-container>
                                                    </tr>
                                                </ng-template>

                                                <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                                    <tr [pSelectableRow]="record">
                                                        <td style="width: 25px">
                                                            <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                                        </td>
                                                        <td style="width: 40px">
                                                            {{ i + 1 + paginator.first }}
                                                        </td>
                                                        <ng-container *ngFor="let ext of extensions">
                                                            <ng-container [ngSwitch]="ext.formatType">
                                                                <ng-container *ngSwitchCase="1">
                                                                    <td width="{{ ext.width }}">
                                                                        {{ record[ext.key] | number: '1.0-0' }}
                                                                    </td>
                                                                </ng-container>
                                                                <ng-container *ngSwitchCase="2">
                                                                    <td width="{{ ext.width }}">
                                                                        {{ record[ext.key] | number: '1.2-2' }}
                                                                    </td>
                                                                </ng-container>
                                                                <ng-container *ngSwitchCase="4">
                                                                    <td width="{{ ext.width }}">
                                                                        {{
                                                                            record[ext.key] | momentFormat: 'YYYY-MM-DD'
                                                                        }}
                                                                    </td>
                                                                </ng-container>
                                                                <ng-container *ngSwitchDefault>
                                                                    <td
                                                                        width="{{ ext.width }}"
                                                                        style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
                                                                    >
                                                                        {{ record[ext.key] }}
                                                                    </td>
                                                                </ng-container>
                                                            </ng-container>
                                                        </ng-container>
                                                    </tr>
                                                </ng-template>
                                            </p-table>

                                            <div class="primeng-paging-container">
                                                <p-paginator
                                                    [rows]="20"
                                                    #paginator
                                                    (onPageChange)="getRecordsIfNeeds($event)"
                                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                                    [rowsPerPageOptions]="
                                                        primengTableHelper.predefinedRecordsCountPerPage
                                                    "
                                                >
                                                </p-paginator>
                                                <span class="total-records-count">
                                                    {{ l('TotalRecordsCount', primengTableHelper.totalRecordsCount) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">
                            {{ l('Cancel') }}
                        </button>
                        <button
                            (click)="save()"
                            type="button"
                            class="btn btn-primary blue"
                            [disabled]="!editForm.form.valid"
                            [buttonBusy]="saving"
                            [busyText]="l('SavingWithThreeDot')"
                        >
                            <i class="fa fa-save"></i>
                            <span>{{ l('Save') }}</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
